<template>
  <a-spin :spinning="confirmLoading">
    <a-modal :title="title" :width="width" :visible="visible" @ok="submitForm" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
      <a-card hoverable>
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>
            <a-col :span="24">
              <a-form-item label="流程类别" v-bind="validateInfos.category">
                <j-dict-select-tag v-model:value="formData.category" dictCode="act_model_type" placeholder="请选择流程类别" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="部署文件" v-bind="validateInfos.deployFile">
                <a-upload-dragger
                  :file-list="formData.deployFileList"
                  v-model="formData.deployFile"
                  name="deployFile"
                  :multiple="false"
                  :max-count="1"
                  :before-upload="beforeUploadDeploy"
                  @remove="handleRemove"
                >
                  <p class="ant-upload-drag-icon">
                    <inbox-outlined />
                  </p>
                  <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
                  <p class="ant-upload-hint">支持文件格式：zip、bar、bpmn、bpmn20.xml</p>
                </a-upload-dragger>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </a-modal>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick, defineExpose } from 'vue'
  import { useMessage } from '/@/hooks/web/useMessage'
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'
  import { updateDeploy } from '../ActProcessDef.api'
  import { Form, UploadProps } from 'ant-design-vue'

  const title = ref<string>('')
  const width = ref<number>(800)
  const visible = ref<boolean>(false)
  const disableSubmit = ref<boolean>(false)

  const emit = defineEmits(['register', 'success'])
  const { createMessage } = useMessage()

  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } })
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } })
  const confirmLoading = ref<boolean>(false)

  const formRef = ref()
  const useForm = Form.useForm

  const formData = reactive<Record<string, any>>({
    category: 'default',
    deployFile: {},
    deployFileList: [],
  })

  //表单验证
  const validatorRules = {
    category: [{ required: true, message: '请选择流程类别!' }],
    deployFile: [{ required: true, message: '请上传部署文件!' }],
    deployFileList: [{ required: true, message: '请上传部署文件!' }],
  }

  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules)

  function beforeUploadDeploy(file) {
    console.log(file)
    if (!file) {
      return false
    }
    const result = 'zip,bar,bpmn,bpmn20.xml'.split(',').some((type) => {
      console.log(type, file.name.lastIndexOf(type))
      return file.name.lastIndexOf(type) > -1
    })
    console.log('in zip,bar,bpmn,bpmn20.xml', result)
    if (!result) {
      createMessage.warn('上传文件类型不对！')
      formData.deployFileList = []
      formData.deployFile = {}
      return false
    }
    formData.deployFileList = [file]
    formData.deployFile = file
    return false
  }

  const handleRemove: UploadProps['onRemove'] = (file) => {
    const index = formData.deployFileList.indexOf(file)
    const newFileList = formData.deployFileList.slice()
    newFileList.splice(index, 1)
    formData.deployFileList = newFileList
  }

  /**
   * 新增
   */
  function add() {
    title.value = '新增流程部署'
    visible.value = true
    nextTick(() => {
      resetFields()
      //赋值
      Object.assign(formData, {})
    })
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    // 触发表单验证
    await validate()
    confirmLoading.value = true

    await updateDeploy(
      formData,
      () => {
        handleCancel()
        emit('success')
        confirmLoading.value = false
      },
      () => {
        confirmLoading.value = false
      }
    )
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false
    resetFields()
  }

  defineExpose({
    add,
    disableSubmit,
  })
</script>

<style>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }
</style>
